<template>
	<view class="content">
		<view style="width: 90%; margin: 200rpx auto;">
			<view style="margin-bottom: 70rpx; font-size: 100rpx; color: #FFC90E; text-align: center;">注册</view>
		<view class="inputs" >	
			<view style="margin: 40rpx 0;">
				<uni-easyinput 
					class="input" 
					v-model="form.username" 
					prefixIcon="person" 
					placeholder="请输入手机号" 
					@blur="validateUsername"
				></uni-easyinput>
				<view class="error" v-if="errors.username" style="color: red; font-size: 24rpx;">{{ errors.username }}</view>
			</view>
			
			<view style="margin: 40rpx 0;">
				<uni-easyinput 
					class="input" 
					type="password" 
					v-model="form.password" 
					prefixIcon="locked" 
					placeholder="请输入密码"
					@blur="validatePassword"
				></uni-easyinput>
				<view class="error" v-if="errors.password" style="color: red; font-size: 24rpx;">{{ errors.password }}</view>
			</view>
			
			<view style="margin: 40rpx 0;">
				<uni-easyinput 
					class="input" 
					type="password" 
					v-model="form.confirm" 
					prefixIcon="locked" 
					placeholder="请确认密码"
					@blur="validateConfirmPassword"
				></uni-easyinput>
				<view class="error" v-if="errors.confirm" style="color: red; font-size: 24rpx;">{{ errors.confirm }}</view>
			</view>
		</view>	
			<view style="margin: 40rpx 0;">
				<button style="width: 350rpx;margin-top: 55px;border: 1rpx solid black;background-color: #FFC90E;box-shadow: 4rpx 4rpx 3rpx rgba(0, 0, 0, 0.3);" type="default" @click="register" :disabled="isButtonDisabled">注册</button>
				<!-- <button type="default" @click="register" :disabled="isButtonDisabled">注册</button> -->
			</view>
		</view>
	</view>
</template>

<script>
import setting from '../../setting';
export default {
	data() {
		return {
			form: {
				username: '',
				password: '',
				confirm: ''
			},
			errors: {
				username: '',
				password: '',
				confirm: ''
			},
			isButtonDisabled: false
		};
	},
	methods: {
		// 验证手机号
		validateUsername() {
		    // 判断手机号是否为空
		    if (!this.form.username) {
		        this.errors.username = '手机号不能为空';
		    }
		    // 判断手机号是否为11位
		    else if (this.form.username.length !== 11) {
		        this.errors.username = '手机号必须为11位';
		    }
		    // 判断手机号格式是否正确（以1开头，第二位是3-9之间的数字）
		    else if (!/^1[3-9]\d{9}$/.test(this.form.username)) {
		        this.errors.username = '请输入有效的手机号';
		    } else {
		        this.errors.username = '';
		    }
		},
		// 验证密码
		validatePassword() {
		    // 新密码规则：4-12位，必须包含字母和数字，可以包含特殊字符但不强制
		    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&,.]{4,12}$/;
		    
		    if (!this.form.password) {
		        this.errors.password = '密码不能为空';
		    } 
		    else if (!passwordRegex.test(this.form.password)) {
		        this.errors.password = '密码需4-12位，必须包含字母和数字，可以包含特殊字符';
		    }
		    else {
		        this.errors.password = '';
		    }
		},
		// 验证确认密码
		validateConfirmPassword() {
			if (this.form.confirm !== this.form.password) {
				this.errors.confirm = '两次输入的密码不一致';
			} else {
				this.errors.confirm = '';
			}
		},
		// 注册操作
		register() {
			// 确保没有错误才能提交
			this.validateUsername();
			this.validatePassword();
			this.validateConfirmPassword();

			if (this.errors.username || this.errors.password || this.errors.confirm) {
				return;
			}

			// 设置按钮为禁用状态，防止重复提交
			this.isButtonDisabled = true;

			// 请求后端进行注册操作
			const data = {
				username: this.form.username,
				password: this.form.password
			};

			// 这里发送注册请求到后端接口
			uni.request({
				url: setting.url+'/api/register', // 请根据实际接口地址进行调整
				method: 'POST',
				data: data,
				success: (response) => {
					if (response.statusCode === 201) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
						// 注册成功后可以跳转到登录页或者其他操作
						uni.navigateTo({
						    url: '/pages/login/login'
					});
					} else {
						console.log(response.statusCode);
						uni.showToast({
							title: response.data.message || '注册失败，请稍后重试',
							icon: 'none'
						});
					}
				},
				fail: (error) => {
					uni.showToast({
						title: '请求失败，请检查网络连接',
						icon: 'none'
					});
				},
				complete: () => {
					// 恢复按钮状态
					this.isButtonDisabled = false;
				}
			});
		}
	}
};
</script>

<style scoped>
	.content {
		width: 100vw;  
		height: 50vh;  
		margin-top: 50px;
	}  
.inputs{
	margin-top: 80px;
	margin-bottom: 80px;
}	
.input {
	width: 80%;
	height: 100%;
	margin-left: 35px;
}
.error{
	margin-left: 35px;
}
</style>
